<template>
  <a-modal :visible="visible" title="上传视频要求" @cancel="cancelChange">
    <div>
      <span class="text-color">1、</span> 只有一张人脸出境，不要使用有多人的视频
    </div>
    <div>
      <span class="text-color">2、</span>人脸在视频中建议人脸宽度占整体画面宽度1/3以上，确保人脸不要太小
    </div>
    <div>
      <span class="text-color">3、</span>人脸不要出屏幕，确保整张人脸都在屏幕区域内，确保人脸不要太大
    </div>
    <div>
      <span class="text-color">4、</span>确保人脸面部特征没有被遮挡，并努力让面部轮廓清晰可见
    </div>
    <div style="font-weight: 700;margin: 10px 0 5px">拍摄不佳示例</div>
    <div style="text-align: center">
      <img src="@/common/image/shotstack/biaoqingganrao.png" class="image" />
    </div>
    <template #footer>
      <a-button type="primary" @click="cancelChange">我知道了

        <span v-show="closeTime > 0">{{ closeTime + 's' }}</span>
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  createVNode,
  onUnmounted,
} from "vue";

export default defineComponent({
  name: "videRequirementsModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 默认关闭时间
    closeTime: {
      type: Number,
      default: 5
    }
  },
  setup(props, context) {
    const state = reactive({
      count: 0,
    });

    const cancelChange = () => {
      context.emit("cancel");
    };

    return {
      ...toRefs(state),
      cancelChange,
    };
  },
});
</script>

<style lang="less" scoped>
.text-color {
  color: #0952c8;
}
.image {
  width: auto;
  height: 260px;
}
</style>
